<template>
	<el-card>
		<div class="head">
			<el-input
				v-model="SalaryDetailPage.keyword"
				style="width: 200px; margin: 0 1vw 0 1vw; height: 32px"
			/>
			<el-button @click="getSalaryDetail()">搜索</el-button>
		</div>
		<el-table :data="salaryDetails">
			<el-table-column label="ID" type="index" />
			<el-table-column label="学院" prop="department__name" />
			<el-table-column label="姓名" prop="name" />
			<el-table-column label="入职日期" prop="entry_time" />
			<el-table-column label="职位" prop="job" />
			<el-table-column label="工资比率">
				<template #default="scope">
					<el-tag v-if="scope.row.user_state === 1" type="success"
						>1</el-tag
					>
					<el-tag
						v-else-if="scope.row.user_state === 2"
						type="warning"
						>0.8</el-tag
					>
				</template>
			</el-table-column>
			<el-table-column label="应出勤" prop="should_attend" />
			<el-table-column label="实际出勤" prop="practical_attend" />
			<el-table-column label="计入工资天数" prop="reckon_day" />
			<el-table-column label="基础工资" prop="basic_wage" />
			<el-table-column label="工龄工资" prop="seniority" />
			<el-table-column label="课时费" prop="class_fee" />

			<el-table-column label="辅导员津贴" prop="guide_benefits" />
			<el-table-column label="学院人头费" prop="college_num" />
			<el-table-column label="奖金" prop="bonus" />
			<el-table-column label="补贴" prop="subsidy" />
			<el-table-column label="单位社保" prop="social_security" />
			<el-table-column label="公积金" prop="social_accum" />
			<el-table-column label="工资状态" prop="salary_state">
				<template #default="scope">
					<el-tag v-if="scope.row.salary_state" type="success"
						>已审核</el-tag
					>
					<el-tag v-else type="danger">未审核</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="工资支出合计" prop="expenditure" />
			<el-table-column label="扣缺勤工资" prop="absenteeism" />
			<el-table-column
				label="扣单位承担社会保险"
				prop="insurance_charges"
			/>
			<el-table-column label="异常扣款及迟到、转正差额" prop="abnormal" />
			<el-table-column label="应发工资" prop="should_salary" />
			<el-table-column label="养老保险" prop="provide_insurance" />
			<el-table-column label="医疗保险" prop="medical_insurance" />
			<el-table-column label="失业保险" prop="unemployment_insurance" />
			<el-table-column label="公积金" prop="accumulation" />
			<el-table-column label="个税" prop="individual" />
			<el-table-column label="工会费" prop="admission" />
			<el-table-column label="实发金额" prop="net_payroll" />

			<el-table-column label="操作" prop="salary_state" fixed="right">
				<template #default="scope">
					<el-button @click="auditing(scope.row)">去审核</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			v-model:currentPage="SalaryDetailPage.page"
			v-model:page-size="SalaryDetailPage.pagesize"
			:page-sizes="[5, 10, 15, 20]"
			:small="small"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</el-card>

	<!-- 审核工资弹框 -->
	<el-dialog v-model="updateVisible" :show-close="false" :fullscreen="true">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">
					This is a custom header!
				</h4>
				<el-button type="danger" @click="close">
					<el-icon class="el-icon--left">
						<CircleCloseFilled />
					</el-icon>
					Close
				</el-button>
			</div>
		</template>
		<el-form :model="formPut">
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="学院/部门">
						<el-input v-model="formPut.department__name" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="姓名">
						<el-input v-model="formPut.name" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="入职日期">
						<el-input v-model="formPut.entry_time" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="职位">
						<el-input v-model="formPut.job" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="工资比率">
						<el-input v-model="formPut.wage_ratio" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="应出勤">
						<el-input v-model="formPut.should_attend" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="实际出勤">
						<el-input v-model="formPut.practical_attend" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="计入工资天数">
						<el-input v-model="formPut.reckon_day" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="基础工资">
						<el-input v-model="formPut.basic_wage" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="工龄工资">
						<el-input v-model="formPut.seniority" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="辅导员津贴">
						<el-input v-model="formPut.guide_benefits" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="学院人头费">
						<el-input v-model="formPut.college_num" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="奖金">
						<el-input v-model="formPut.bonus" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="补贴">
						<el-input v-model="formPut.subsidy" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="单位社保">
						<el-input v-model="formPut.social_security" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="公积金">
						<el-input v-model="formPut.social_accum" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="工资支出合计">
						<el-input v-model="formPut.expenditure" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="扣缺勤工资">
						<el-input v-model="formPut.absenteeism" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="扣单位承担社会保险">
						<el-input v-model="formPut.insurance_charges" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="异常扣款及迟到、转正差额">
						<el-input v-model="formPut.abnormal" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="应发工资">
						<el-input v-model="formPut.should_salary" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="养老保险">
						<el-input v-model="formPut.provide_insurance" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="医疗保险">
						<el-input v-model="formPut.medical_insurance" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="失业保险">
						<el-input v-model="formPut.unemployment_insurance" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="公积金">
						<el-input v-model="formPut.accumulation" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="个税">
						<el-input v-model="formPut.individual" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="工会费">
						<el-input v-model="formPut.admission" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="实发金额">
						<el-input v-model="formPut.net_payroll" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="updateVisible = false">Cancel</el-button>
				<el-button type="primary" @click="confirm()">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ElMessageBox } from "element-plus";
import { onMounted, onUnmounted, watch, reactive, ref, onActivated } from "vue";
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties;
const salaryDetails = ref("");
const router = useRouter();
const total = ref();

const updateVisible = ref(false); // 审核工资弹框
const formPut = ref({});
// 审核工资
const auditing = (row) => {
	console.log(row);
	updateVisible.value = true;
	formPut.value = row;
};

// 审核工资单
const confirm = async () => {
	let res = await _this.$API.salary.salaryDetail.update.put(formPut.value);
	if (res.code === 200) {
		ElMessage({
			message: res.message,
			type: "success",
		});
		updateVisible.value = false;
		getSalaryDetail();
	}
};

// 跳转到该页面
const routeDetail = () => {
	if (_this.$route.params.id) {
		_this.$TOOL.session.set("salarName", _this.$route.params);
	} else {
		return;
	}
};
// 分页信息
const SalaryDetailPage = reactive({
	// 分页信息
	page: 1,
	pagesize: 10,
	keyword: "",
});

// 分页
const handleSizeChange = (val) => {
	console.log(`${val} items per page`);
	SalaryDetailPage.pagesize = val;
	getSalaryDetail();
};
// 分页
const handleCurrentChange = (val) => {
	console.log(`current page: ${val}`);
	SalaryDetailPage.page = val;
	getSalaryDetail();
};

// 工资单列表
const getSalaryDetail = async () => {
	let { id } = await _this.$TOOL.session.get("salarName");
	let res = await _this.$API.salary.salaryDetail.list.get({
		...SalaryDetailPage,
		salary_theme: id,
	});
	salaryDetails.value = res.data;
	total.value = res.total;
};
onActivated(() => {
	routeDetail();
	getSalaryDetail();
});
// watch(,()=>{

// })
</script>

<style lang="scss">
.el-row {
	margin-bottom: 20px;
}

.el-row:last-child {
	margin-bottom: 0;
}

.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

.head {
	display: flex;
	height: 42px;
	line-height: 42px;
	position: relative;
	margin: 2vw;
}

.dialog-footer button:first-child {
	margin-right: 10px;
}

.my-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
</style>
